<template>
  <div>
   <el-container>
    <el-header>
      <div class="left">
        <div class="kiana" @click="showWord"></div>
        <div class="os">
          <slot name="os">呜呜呜，加班班~</slot>
        </div>
      </div>
      <div class="center">
        <slot name="center">xxxxx kiana wink xxxx</slot>
      </div>
      <div class="right">
        <span v-if="$route.path !== '/home'" @click="$router.push('/home')">回到首页</span>
        <span>您好</span>
        <span v-if="!token" @click="$router.push('/shop/login')">登录</span>
        <div v-if="token">
          <span>{{ userInfo?.nickname }}</span>
          <span @click="$router.push('/shop/center')" v-if="$route.path !== '/shop/center'">个人中心</span>
          <span @click="$router.push('/shop/rPwd')" v-if="$route.path == '/shop/center'">修改密码</span>
          <span @click="doLogoutData">退出登录</span>
        </div>
      </div>
    </el-header>
   </el-container>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
  name: 'Myheader',
  computed: {
    ...mapGetters(['userInfo', 'token']),
  },
  methods: {
    ...mapActions('user', ['doLogoutData']),
    showWord() {
      this.$message.success({
        message: '本小姐是被迫加班的!',
        duration: 1000,
        showClose: true,
      })
    },
    
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100vw;
  margin-bottom: 80px;
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #333;
    background-image: url(https://img1.baidu.com/it/u=2497345249,3609845312&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .left, .center, .right {
      flex: 1;
    }
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      .kiana {
        // height: 100%;
        height: 80px;
        width: 150px;
        background-image: url(https://img0.baidu.com/it/u=1997065501,4138649119&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500);
        background-size: cover;
        cursor: pointer;
      }
      .os {
        color: skyblue;
        background-color: azure;
        padding: 0 3px;
        border-radius: 10px;
        font-size: 12px;
      }
    }
    .center {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cc66cc;
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        margin-left: 10px;
        &:hover {
          cursor: pointer;
          color: #ff6699;
        }
      }
    }
  }
}
</style>
